<template>
	<view style="min-height: 100vh;" class="bg-color">
		<view class="">
			<view class="cu-bar bg-color search">
				<view class="search-form round border-color bg-color">
					<picker class="" @change="searchChange" :value="searchIndex" :range="searchs">
						<view class="picker text-white padding-lr-sm">
							{{searchIndex>-1?searchs[searchIndex]:'查询条件'}}<text class="cuIcon-right"></text>
						</view>
					</picker>
					<input v-model="searchKey" class="bg-color text-color" type="text" placeholder="请输入查询条件" confirm-type="search"></input>
					<text @tap="search()" class="cuIcon-search text-color"></text>
				</view>
			</view>
		</view>
		<view v-if="records.length <= 0" class="">
			<view class="text-left padding">
				<view class="text-orange">温馨提示：</view>
				<view
					class="text-gray">感谢您选择阿睿斯汽车膜产品，为了您的合法消费权益，请在贴完阿睿斯汽车膜验收完成后，务必向阿睿斯汽车膜经销商索取官方电子质保信息，电子质保是唯一的正品认证渠道，以防假冒！</view>
			</view>
		</view>
		
		<view v-if="records.length <= 0" class="">
			<view class="text-left padding">
				<view class="text-orange">质保说明：</view>
				<view class="text-gray">1.从施工之日起，施工车辆享受阿睿斯汽车膜的官方质保服务。</view>
				<view class="text-gray">2.保修的范围包括:脱胶、开裂、起泡和分层。本保证不包含因外力造成的产品磨损、外界对产品的腐蚀、事故、碰撞或任何形式的故意破坏。</view>
				<view class="text-gray">3.本保证不可转让出售,该车辆转让时本保证自动终止。</view>
			</view>
		</view>
		<view v-if="records.length > 0" class="cu-list menu border-bottom">
			<view class="cu-item bg-color">
				<view class="">
					<text class="text-color cuIcon-list "></text><text class="text-color">查询结果</text>
				</view>
			</view>
		</view>
		<view class="menu-avatar">
			<view v-for="(record,index) in records" :key="index" class="bg-color  margin-sm padding-sm border-bottom">
				<view class="flex justify-between">
					<view>
						<view class="text-grey">
							<text class="cuIcon-deliver margin-right-xs">{{record.carType}}</text>
							<text class="cuIcon-cuIcon text-purple margin-right-xs">{{record.carNumber}}</text>
						</view>
						<view class="text-gray flex justify-start">
							<view class="text-cut">
								<text class="cuIcon-people margin-right-xs">{{record.name}}</text>
							</view>
						</view>
					</view>
					<view class="action text-grey flex flex-direction justify-around">
						<view class="text-center cuIcon-repairfill"><text class="text-sm">{{record.buildDate.split(" ")[0]}}</text>
						</view>
						<view class="text-center cuIcon-attentionfill"><text class="text-sm">{{record.qaDate.split(" ")[0]}}</text>
						</view>
					</view>
				</view>
				<view class="text-gray flex justify-between margin-tb-sm">
					<view class="text-cut">
						<text class="cuIcon-profilefill">{{record.distributorName}}</text>
					</view>
					<view>
						<text @tap="toRecordDetail(record.recordId)" class="cu-tag bg-color border round text-color">详细</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				searchKey: "",
				searchObject: {},
				searchIndex: 0,
				searchs: ["车牌号码", "车主手机", "车架号码"],
				records: []
			};
		},
		methods: {
			search: function() {
				let self = this;
				if (this.util.isEmptyString(this.searchKey)) {
					this.message.warning("请输入检索关键字");
					return;
				}
				
				if (0 == this.searchIndex) {
					this.searchObject = {
						carNumber: this.searchKey
					};
				} else if (1 == this.searchIndex) {
					this.searchObject = {
						tel: this.searchKey
					};
				} else {
					this.searchObject = {
						vin: this.searchKey
					};
				}
				
				this.http.get({
					url: "/record/info",
					param: this.searchObject
				}).then(function(res) {
					self.records = res;
				});
			},
			searchChange: function(e) {
				this.searchIndex = e.detail.value;
			},
			toRecordDetail: function(recordId) {
				uni.navigateTo({
					url: "../record/detail?id="+recordId
				});
			}
		}
	}
</script>

<style scoped>
	.cuIcon-right {
		margin: 0 !important;
	}
	
	.border {
		border: 1px solid #eeeeee;
	}
</style>
